@charset "utf-8";
@function r($px){
    @return ($px/40)*1rem;
}
@function px($px){
    @return ($px/2)*1px;
}
.fl{
    float:left;
}
.fr{
    float:right;
}

//头部导航开始
.navbar{
    width:100%;
    height:50px;
    background: #222222;
    border:none;
    border-radius: 0;
    box-sizing: border-box;
    margin-bottom:0;
    position:fixed;
    z-index: 999;
    top:0;
    
    
    .active{
        background: #080808;
    }
    //logo部分开始
    .navbar-header{       
        .navbar-brand{
            line-height: 50px;
            img{
                 display:inline-block;
            }          
            padding-top:0;
            padding-bottom:0;
        }
    }
    //logo部分开始
    #navbar .navbar-nav select{
       font-size: 14px;
       border:0;
       background:  #222222;
       color: #9d9d9d;
       width: 108px;
       height:50px;
       outline: none;
       cursor: pointer;
       text-align: center;
       font-weight:bold; 
       &:hover{
           color: white;
       }
       option{
           outline: none;
           background: white;
           color:black;
           border:none;
           &:hover{
               background: black;
           }
       }  
    }
    #navbar .navbar-nav > li > a {
        color: #9d9d9d;
        &:hover{
            color:white;
            background: none;
        }
    }
    .navbar-nav > .active > a{
        background: #080808;
        
    }
}
//头部导航结束


//中间主体内容部分开始
#family-content{
    
    margin-top:50px;
}

//green部分开始
.grey-second{
    background: #f7f7f7;
}
.green{
    padding:r(40) 0;
    background: #8bc01f;
    .green-left{
        .green-button{
                font-size: r(14);
                text-align: center;
                line-height:r(50) ;
                color:#8BC01F;
                width: r(150);
                height: r(50);
                display: block;
                border:none;
                border-radius:3px;
                background: #ffffff;
                margin-top: r(30);
            }
        .green-title{
            
            >span{
                border-radius: 6px;
                text-align: center;
                line-height: r(54);
                font-size: r(48);
                width:r(57);
                height:r(54);
                color:#8BC01F;
                background: #ffffff;
                margin-right:5px;
            }
            >h2{
                font-size: r(48);
                margin:0;
                color:#FFFFFF;
              
            } 
        }
        p{
            color:#ffffff;
            font-size: r(14);
            &:nth-of-type(1){
                font-size: r(24);
                margin-top:r(22);
                margin-bottom:r(19);
            }
        }
        
    }
    .green-right{
            a img{
                padding-left:70px;
                
            }
        }
    
    
}
//green部分结束

//blue部分开始
.blue{
    padding:r(40) 0;
    background: #3393df;
    //左开始
    .blue-left{
        img{
            margin-top:r(20);
        }
        .blue-title{            
            >span{
                border-radius: 6px;
                text-align: center;
                line-height: r(54);
                font-size: r(48);
                width:r(57);
                height:r(54);
                color:#8BC01F;
                background: #ffffff;
                margin-right:5px;
            }
            >h2{
                font-size: r(48);
                margin:0;
                color:#FFFFFF;            
            } 
        }     
    }
    //左结束
    //中开始
    .blue-middle{
        margin-top:90px;
        h3{
            font-size: r(24);
            color:#ffffff;
        }
        p{
            font-size: r(14);
            color:#ffffff;
        }
    }
    //中结束
    
    //右开始
    .blue-right{
        img{
            margin-top:r(52);
        }
    }
    //右结束
}
//blue部分结束

//grey部分开始
.grey{
    padding:30px 0;
   .grey-top{
       margin-bottom:10px;
       >span{
            display:block;
            width:25px;
            height:25px;
            background: #3393df;
            color:#ffffff;
            font-size: 18px;  
            text-align: center;
            line-height: 25px;
            border-radius: 6px;
            margin-right:5px;
       }
       h2{
           font-size: 21px;
           margin:0;
           color:#3393df;
       }
   }
   .title-p{
       font-size: 12px;
   }
   .grey-content{
       min-height:64px;
       h3{
           font-size: 18px;
           color:#3393df;
       }
       p{
           font-size: 12px;
       }
   }
   .grey-img{
       
       img{
           margin:0 auto;
           width:70px;
           display:block;
       }
   }
}

//grey部分结束

//中间主体内容部分结束






//底部部分开始
footer{
    width:100%;
    padding-top:r(10);
    padding-bottom:r(10);
    background: #3b3b3b;

    img{
        cursor: pointer;
    }
    .footer-left{
        margin-top:r(20);
        span{
            font-size: r(14);
            color:#a1a3ab;
        }
        p{
            font-size: r(12);
            color:#a1a3ab;
        }
    }
    .footer-right{
        margin-top:r(20);
        img{
            margin-left:r(10);
        }
        .wx{
            position:relative;
            .er{
                position:absolute;
                top:-160px;
                left:7px;
                display:none;
                
            }
        }       
    }       
}
//底部部分结束


//媒体查询部分

@media screen and (min-width:970px){
    //调整footer部分的相关元素
    footer{
        .footer-left{
            margin-top:15px;
            span{font-size: 14px;}
            p{font-size: 12px;}
        }
        .footer-right{
            margin-top:15px;
        }
    }
    
    .green{      
        .green-left{
            .green-button{
                font-size: 14px;
                text-align: center;
                line-height:50px ;
                width: 150px;
                height: 50px;
                border-radius: 6px;
            }
            .green-title{
                >span{
                    line-height: 54px;
                    font-size: 48px;
                    width:57px;
                    height:54px;

                }
                >h2{
                    font-size: 48px;
                    margin:0;
                    color:#FFFFFF;
                  
                } 
            }
            p{
                font-size: 14px;
                margin-bottom:30px;
                &:nth-of-type(1){
                    font-size: 24px;
                    margin-top:22px;
                    margin-bottom:69px;
                }
            }
        }
    }
    
    .grey{
       .grey-top{
           >span{
                width:40px;
                height:40px;
                font-size: 25px;  
                line-height: 40px;
                margin-right:5px;
           }
           h2{
               font-size: 30px;
               line-height:40px;
           }
       }
       .title-p{
           font-size: 18px;
       }
       .grey-content{
           min-height:94px;
           h3{
               font-size: 25px;
               color:#3393df;
           }
           p{
               font-size: 18px;
           }
       }
       .grey-img{         
           img{
               margin:0 auto;
               width:140px;
           }
       }
    }
    
    
    
    
}

@media screen and (max-width:767px){
    //设置手机端时导航条的样式
   .navbar-nav{
       margin-top:-5px;
       margin-bottom:0;
       background: #222222;
       
   }
   //green部分开始
    .green{
        .green-left{
            p{
                color:#ffffff;
                font-size: r(18);
            }
            
        }              
    }
//green部分结束
    //blue部分开始
    .blue{
        .blue-middle{
            p{
                font-size: r(18);
                color:#ffffff;
            }
        }
    }
    //blue部分结束

}

@media screen and (min-width:768px) and (max-width:992px){
    //设置尾部二维码的位置
    footer{
        .footer-right{
            .wx{
                .er{
                 top:-160px;
                    left:0px;
                 }
            }        
        }                
    }
    .grey{
       .grey-top{
           margin-bottom:10px;
           >span{
                width:35px;
                height:35px;
                font-size: 22px;  
                line-height: 35px;
                margin-right:5px;
           }
           h2{
               font-size: 26px;
               line-height:35px;
           }
       }
       .title-p{
           font-size: 15px;
       }
       .grey-content{
           min-height:64px;
           h3{
               font-size: 22px;
               color:#3393df;
           }
           p{
               font-size: 15px;
           }
       }
       .grey-img{         
           img{
               margin:0 auto;
               width:90px;
           }
       }
    }
    
    
    
    
}
@media screen and (max-width:768px){
    //设置尾部二维码的位置
    footer{
        .footer-right{
            margin-top:20px;
            .wx{
                .er{
                 top:-160px;
                    left:-5px;
                 }
            }        
        }                
    }
    
}
@media screen and (min-width:768px){
    .blue{
        .blue-left{
            .blue-title{
                >span{
                line-height: 40px;
                font-size: 34px;
                width:43px;
                height:40px;
            }
            >h2{
                font-size: 34px;
                margin:0;
                color:#FFFFFF;            
            }
            }
        }
        .blue-middle{
            h3{
                font-size: 24px;
            }
            p{
                font-size: 12px;
                margin-bottom:30px;
            }
        }
        .blue-right{
            img{
                margin-top:r(122);
            }
        }
    }
    
    .green{      
        .green-left{
            .green-title{
                >span{
                    line-height: 40px;
                    font-size: 34px;
                    width:43px;
                    height:40px;

                }
                >h2{
                    font-size: 34px;
                    margin:0;
                    color:#FFFFFF;
                  
                } 
            }           
        }
    }
    
}

